import { useState } from "react";
import "./App.css";

function MyButton({ count, updateCount }) {
  return <button onClick={updateCount}>clicked {count} times</button>;
}

function App() {
  // 在组件的顶层调用useState，声明状态变量
  const [count, updateCount] = useState(0);
  const [num, updateNum] = useState(0);

  function clickBtn() {
    updateCount(count + 1);
  }
  function clickNum() {
    updateNum(num + 1);
  }
  const lists = [
    {
      title: "Cabbage",
      id: 1,
    },
    {
      title: "Garlic",
      id: 2,
    },
    {
      title: "Apple",
      id: 3,
    },
  ];
  const listsItems = lists.map((product) => {
    return <li key={product.id}>{product.title}</li>;
  });
  /* 
    1. 必须具有一个根节点，就算只是这样也可以<></>
    2. 所有标签必须闭合,像img必须这样写<img />
    3. 标签属性名必须是驼峰命名法

    4. 使用className创建类名
    5. 使用{}可以访问变量值,添加动态style，就是这样写style={appStyle}
    6. 条件渲染,直接在{}里面写三元表达式，或者逻辑运算符
    7. 列表渲染：使用map或者for循环，记得给他传递一个key

    8. 进行事件的绑定：onClick={clickBtn}
    9. use开头的是钩子，必须在函数的顶层调用钩子；如useState: 在组件的顶层调用useState，声明状态变量; const [count, updateCount] = useState(0); 其中count和updateCount变量名字可以任意取，但是第一个是变量，第二个是方法
    10. 封装组件，必须使用大驼峰来进行命名。父组件传值和方法直接这样传：<MyButton count={count} updateCount={clickBtn} />，然后子组件接受：function MyButton({ count, updateCount }) {

    vscode配置
    auto rename tag
  */
  return (
    <>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <h2>条件渲染</h2>
      <ul>{listsItems}</ul>
      <MyButton count={count} updateCount={clickBtn} />
      <MyButton count={num} updateCount={clickNum} />
    </>
  );
}

export default App;
